<template>
  <div class="login_container">
    <div class="form">
      <!-- :rules 验证表单 -->
      <!-- rules: 表单验证 -->
      <div class="form-title">
        <span>登录</span>
        <router-link to="/register">
          <el-link type="primary">点击注册</el-link>
        </router-link>
      </div>
      <el-form ref="formRef" class="login_form" :model="form" :rules="rules" size="large">
        <!-- 用户名 -->
        <!-- prop 指定校验规则 -->
        <el-form-item prop="username">
          <el-input placeholder="用户名" v-model="form.username"> </el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input
            placeholder="请输入密码"
            v-model="form.password"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input
            placeholder="请输入验证码"
            v-model="form.code"
            style="width: 63%"
          ></el-input>
          <div class="login-code">
            <img :src="codeUrl" @click="getCode" class="login-code-img" />
          </div>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item class="btns">
          <el-button type="primary" @click="login" @keyup.enter="login" ref="loginRef"
            >登陆</el-button
          >
          <el-button type="info" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from '@/stores/user';
import { ElMessage, ElNotification, useRestoreActive, type FormInstance } from 'element-plus';
import { ref, reactive, onMounted, getCurrentInstance } from 'vue';
import { useRoute } from 'vue-router';
import { useRouter } from 'vue-router';

import Login from '@/api/login'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()

const form = ref({
  username: '',
  password: '',
  code: '',
  uuid: '',
})

const redirect = ref('')

const { proxy }  = getCurrentInstance()

// console.log(redirect);

onMounted(() => {
  window.addEventListener('keyup', onKeyUp)
})

function onKeyUp(e: any) {
  console.log(e.keyCode);

  if (e.keyCode == 13)
    login()
}


const codeUrl = ref('')

// const formRef = ref<FormInstance>()

const login = () => {
  let path = route.query.redirect || '/'

  proxy.$refs.formRef.validate((valid: any) => {
    if (!valid) {
     return ElMessage.warning('验证失败！')
    }
    userStore.login(form.value)
    .then(res => {
      // 登陆成功，跳转
      router.push({
        path: path.toString() || '/'
      })
      ElMessage.success(res.message)
      // userStore.getInfo()
    })
    .catch(err => {
      console.log(err);
      getCode()
    })
  })

}

const getCode = async () => {
  const {data: {img, uuid}} = await Login.getCodeImage()
  // console.log(res);

  codeUrl.value = "data:image/gif;base64," + img
  form.value.uuid = uuid

}

const reset = () => {
  const el = proxy.$refs.formRef
  if (!el) return
  el.resetFields()
}

const rules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 18, message: '长度在6到18个字符之间', trigger: 'blur' }
  ],
  code: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
  ]
})

getCode()
</script>

<style scoped lang="less">
.login_container {
  background: linear-gradient(135deg, #17ead9, #6078ea);
  background-size: 300% 300%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: gradient 5s ease infinite;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.form {
  background-color: #fff;
  padding: 50px;
  border-radius: 20px;
  width: 350px;
  box-sizing: content-box;
}

.form-title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  align-items: baseline;

  & > span {
    font-size: xx-large;
  }
}
.login-code {
  width: 33%;
  height: 40px;
  // float: right;
  display: flex;
  align-items: center;
  margin-left: 4%;
  img {
    width: 100%;
    cursor: pointer;
    vertical-align: middle;
  }
}

.btns {
  .el-form-item__content {
    // justify-content: center;
  }
}
</style>
